---
type: tutorial
title: Combinez des mises en page pour tirer le meilleur parti des deux mondes
description: |-
  Tutoriel : Construisez votre premier blog Astro —
  Ajoutez votre mise en page de base à la mise en page qui formate vos billets de blog
i18nReady: true
---
import Blanks from '~/components/tutorial/Blanks.astro';
import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

Maintenant que vous avez ajouté une mise en page à chaque billet de blog, faisons en sorte que vos billets ressemblent au reste des pages de votre site web !

<PreCheck>
  - Imbriquez votre mise en page de billet de blog dans votre mise en page principale
</PreCheck>

## Imbriquez vos deux mises en page

Vous avez déjà une mise en page `BaseLayout.astro` pour définir la mise en page générale de vos pages.

`MarkdownPostLayout.astro` vous offre quelques modèles supplémentaires pour les propriétés courantes des billets de blog, telles que `title` et `date`, mais vos billets de blog ne ressemblent pas aux autres pages de votre site. Vous pouvez assortir l'apparence de vos billets de blog au reste de votre site en **imbriquant des mises en page**.

<Steps>
1. Dans `src/layouts/MarkdownPostLayout.astro`, importez `BaseLayout.astro` et utilisez-le pour envelopper l'ensemble du contenu du modèle. N'oubliez pas de passer la prop `pageTitle` :

    ```astro title="src/layouts/MarkdownPostLayout.astro" ins={2,5,12}
    ---
    import BaseLayout from './BaseLayout.astro';
    const { frontmatter } = Astro.props;
    ---
    <BaseLayout pageTitle={frontmatter.title}>
      <h1>{frontmatter.title}</h1>
      <p>{frontmatter.pubDate.toString().slice(0,10)}</p>
      <p><em>{frontmatter.description}</em></p>
      <p>Écrit par : {frontmatter.author}</p>
      <img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />
      <slot />
    </BaseLayout>
    ```

2. Vérifiez l'aperçu dans votre navigateur à l'adresse `http://localhost:4321/posts/post-1`. Vous devriez maintenant voir le contenu rendu par :

    - Votre **mise en page principale**, y compris vos styles, liens de navigation et pied de page social.
    - Votre **mise en page de billet de blog**, y compris les propriétés du frontmatter telles que la description, la date, le titre et l'image.
    - Votre **contenu Markdown individuel de billet de blog**, y compris uniquement le texte écrit dans ce billet.

3. Remarquez que votre titre de page est maintenant affiché deux fois, une fois par chaque mise en page.

    Supprimez la ligne qui affiche votre titre de page dans `MarkdownPostLayout.astro` :

    ```astro title="src/layouts/MarkdownPostLayout.astro" del={2}
    <BaseLayout pageTitle={frontmatter.title}>
      <h1>{frontmatter.title}</h1>
      <p>{frontmatter.pubDate.toString().slice(0,10)}</p>
      <p><em>{frontmatter.description}</em></p>
      <p>Écrit par : {frontmatter.author}</p>
      <img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />
      <slot />
    </BaseLayout>
    ```

4. Vérifiez à nouveau l'aperçu dans votre navigateur à `http://localhost:4321/posts/post-1` et assurez-vous que cette ligne n'est plus affichée et que votre titre n'est affiché qu'une seule fois. Apportez les ajustements nécessaires pour vous assurer de ne pas avoir de contenu en double.
</Steps>


  Assurez-vous que :

    - Chaque billet de blog affiche le même modèle de page, et aucun contenu ne manque. (Si l'un de vos billets de blog manque de contenu, vérifiez ses propriétés du frontmatter.)

    - Aucun contenu n'est dupliqué sur une page. (Si quelque chose est rendu deux fois, assurez-vous de le supprimer de `MarkdownPostLayout.astro`.)

    Si vous souhaitez personnaliser votre modèle de page, vous pouvez.



<Box icon="question-mark">

### Testez vos connaissances

1. Cela vous permet d'imbriquer une mise en page à l'intérieur d'une autre et de tirer parti du travail avec des éléments modulaires.

    <MultipleChoice>
      <Option>
        déploiement continu
      </Option>
      <Option>
        conception réactive
      </Option>
      <Option isCorrect>
        conception basée sur des composants
      </Option>
    </MultipleChoice>

2. Les mises en page multiples sont particulièrement utiles pour les projets contenant des pages Markdown, comme un...

    <MultipleChoice>
      <Option isCorrect>
        blog
      </Option>
      <Option>
        tableau de bord
      </Option>
      <Option>
        application de chat
      </Option>
    </MultipleChoice>

3. Lequel de ces éléments fournit un modèle pour l'ensemble de vos pages ?

    <MultipleChoice>
      <Option>
        `index.astro`
      </Option>
      <Option isCorrect>
        `BaseLayout.astro`
      </Option>
      <Option>
        `post-1.md`
      </Option>
    </MultipleChoice>
</Box>

<Box icon="check-list">

## Liste de vérification

<Checklist>
- [ ] Je peux imbriquer des mises en page en vérifiant s'il y a des éléments dupliqués.
</Checklist>
</Box>

### Ressources

- [Imbrication de mises en page dans Astro](/fr/basics/layouts/#utilisation-dune-mise-en-page-unique-pour-les-fichiers-md-mdx-et-astro)
